<template>
  <div class="page-wrapper">
    <back-btn @click="goBack" />
    <c-card :title="`${contractName} - 维护计划列表`" class="com-wrapper">
      <el-button slot="func" type="primary" size="small" class="item" @click="showAddDlg">添加</el-button>
      <div class="search-row">
        <!-- <c-search
          v-model="searchText"
          :height="30"
          :width="200"
          placeholder="计划名称搜索"
          class="item"
          @submit="_getMaintainList"
        />-->
      </div>
      <el-table v-loading="loading" :data="maintainList" stripe style="width: 100%" height="494">
        <el-table-column prop="projTypeName" label="计划类型"></el-table-column>
        <el-table-column prop="mpCycle" label="运维周期"></el-table-column>
        <el-table-column prop="totalNumber" label="合同总运维次数"></el-table-column>
        <el-table-column prop="doneNumber" label="已完成次数"></el-table-column>
        <el-table-column prop="restNumber" label="剩余次数"></el-table-column>
        <el-table-column prop="lastDate" label="上次预试/巡检时间"></el-table-column>
        <el-table-column prop="nextDate" label="下次预试/巡检时间"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button size="small" type="text" @click="showEditDlg(row)">编辑</el-button>
            <el-button size="small" type="text" @click="deleteCon(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </c-card>
    <c-dlg
      v-if="maintain"
      :title="(maintain.pkid ? '编辑' : '添加') + '计划'"
      :visible.sync="dialogVisible"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="maintain"
        label-width="60px"
        class="demo-ruleForm"
        label-position="top"
        style="width: 100%;"
      >
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="类型" prop="projTypeId">
              <el-select v-model="maintain.projTypeId" size="small">
                <el-option v-for="t in types" :key="t.pkid" :value="t.pkid" :label="t.projType"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <span class="spliter"></span>
          <div class="row-item">
            <el-form-item label="运维周期(天)" prop="mpCycle">
              <el-input v-model="maintain.mpCycle" size="small" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="运维总次数" prop="totalNumber">
              <el-input v-model="maintain.totalNumber" size="small"></el-input>
            </el-form-item>
          </div>
          <span class="spliter"></span>
          <div class="row-item">
            <el-form-item label="已完成次数" prop="doneNumber">
              <el-input v-model="maintain.doneNumber" size="small"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="上次预试/巡检时间" prop="lastDate">
              <el-date-picker
                v-model="maintain.lastDate"
                size="small"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </div>
          <span class="spliter"></span>
          <div class="row-item">
            <el-form-item label="下次预试/巡检时间" prop="nextDate">
              <el-date-picker
                v-model="maintain.nextDate"
                size="small"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button size="small" type="danger" @click="submitForm">提交</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </div>
    </c-dlg>
  </div>
</template>

<script>
import CCard from "@/components/CCard";
import CDlg from "@/components/CDlg";
import BackBtn from "@/components/BackBtn";
import { getMaintainList, getTypes, saveMaintain, delMaintain } from "@/api/user";
export default {
  name: "Maintain",
  components: {
    CCard,
    CDlg,
    BackBtn
  },
  data() {
    return {
      loading: false,
      rules: {
        projTypeId: [
          { required: true, message: "该字段不能为空", trigger: "blur" }
        ],
        mpCycle: [
          { required: true, message: "该字段不能为空", trigger: "blur" }
        ],
        totalNumber: [
          { required: true, message: "该字段不能为空", trigger: "blur" }
        ],
        doneNumber: [
          { required: true, message: "该字段不能为空", trigger: "blur" }
        ],
        lastDate: [
          { required: true, message: "该字段不能为空", trigger: "blur" }
        ],
        nextDate: [
          { required: true, message: "该字段不能为空", trigger: "blur" }
        ]
      },
      contractId: null,
      contractName: "",
      dialogVisible: false,
      maintainList: null,
      maintain: null,
      types: null
    };
  },
  // computed: {
  //   comId() {
  //     return this.$store.getters.comId;
  //   }
  // },
  async created() {
    this.contractId = this.$route.params.id;
    this.contractName = this.$route.query.name || "";
    this.loading = true;
    try {
      this.maintainList = await getMaintainList(this.contractId);
      this.loading = false;
    } catch (e) {
      this.$message.error(e);
      this.loading = false;
    }
  },
  methods: {
    async _getMaintainList() {
      this.maintainList = await getMaintainList(this.contractId);
    },
    getTypes() {
      if (!this.types) {
        getTypes().then(data => {
          this.types = data;
        });
      }
    },
    goBack() {
      this.$store.dispatch("tagsView/delView", this.$route).then(() => {
        this.$router.go(-1);
      });
    },
    showEditDlg(row) {
      this.getTypes();
      if (this.maintain && this.maintain.pkid === row.pkid) {
        this.dialogVisible = true;
      } else {
        this.maintain = row;
        this.dialogVisible = true;
      }
    },
    showAddDlg() {
      this.getTypes();
      if (!this.maintain) {
        this.maintain = { contractID: this.contractId };
      }
      if (this.maintain && this.maintain.pkid) {
        this.maintain = { contractID: this.contractId };
      }
      this.dialogVisible = true;
    },
    deleteCon(row) {
      this.$confirm("此操作将永久删除该合同, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return delMaintain(row.pkid).then(() => {
          this._getMaintainList();
        });
      });
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const load = this.$loading();
          this.maintain.restNumber =
            this.maintain.totalNumber - this.maintain.doneNumber;
          return saveMaintain(this.maintain)
            .then(() => {
              this.dialogVisible = false;
              this.maintain = null;
              this._getMaintainList();
            })
            .catch(e => this.$message.error(e))
            .finally(() => load.close());
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
